<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>
		
	</title>
</head>
<body>
<p>
	一个图片：
	<img src="./imgs/smiley.gif" alt="smile face" width="32" height="32">
</p>
<p>一个动图：<img src="file://D:/jxy_html/html/imgs/hackanm.gif" alt="Computer man" width="48" height="48"></p>
<p>注意插入动图的语法和插入静图的语法是一样的</p>
</body>
</html>


<!--实例2：显示如何将其他文件夹或服务器的图片显示到网页中。-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<p>一个来自文件夹中的图像：<p><img src="file://D:/jxy_html/html/imgs/chrome.gif" alt="Google Chrome" width="32" height="32"></p></p>
<p>一个来自菜鸟教程的图像：<p><img src="http://www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69"></p></p>
</body>
</html>


<!--实例3：如何在文字中排列图像。-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<h4>默认对齐的图像（align="bottom"）</h4>
<p>这是一些文本。<img src="file://D:/jxy_html/html/imgs/smiley.gif" alt="smiley face" width="32" height="32">这是一些文本。</p>


<h4>图像使用（align="middle"）</h4>
<p>这是一些文本。<img src="file://D:/jxy_html/html/imgs/smiley.gif" align="middle"alt="smiley face" width="32" height="32">这是一些文本。</p>


<h4>图像使用（align="top"）</h4>
<p>这是一些文本。<img src="file://D:/jxy_html/html/imgs/smiley.gif" align="top" alt="smiley face" width="32" height="32">这是一些文本。</p>
<p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

</body>
</html>

<!--实例4：如何使图片浮动至段落的左边或右边。-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<p>一个带图片的段落，图片浮动在这个文本的左边。<img src="file://D:/jxy_html/html/imgs/smiley.gif" alt="smiley face" style="float: left;" width="32" height="32"></p>
<p>一个带图片的段落，图片浮动在这个文本的右边。<img src="file://D:/jxy_html/html/imgs/smiley.gif" alt="smiley face" style="float: right;" width="32" height="32"></p>
<p><b>注意:</b> 在这里我们使用了 CSS "float" 属性，在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>
</body>
</html>



<!--7、实例5：如何将图像作为一个链接使用。-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<p>创建带边框图片链接：<a href="http://www.runoob.com/html/html-tutorial.html"><img src="file://D:/jxy_html/html/imgs/smiley.gif" alt="HTML 教程" width="32" height="32" border="10"></a></p>
<p>创建无边框图片链接：<a href="http://www.runoob.com/html/html-tutorial.html"><img src="file://D:/jxy_html/html/imgs/smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
</body>
</html>


<!--8、实例6：如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<p></p>
<img src="file://D:/jxy_html/html/imgs/planets.gif" alt="Planets" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
	<area shape="rect" coords="0,0,82,126" href="">
	<area shape="circle" coords="90,58,3" href="">
	<area shape="circle" coords="124,58,8" href="">
</map>
</body>
</html>